<!--
  @component
  Implement the preview for the Relation widget.
  @see https://decapcms.org/docs/widgets/#Relation
-->
<script>
  import { getEntriesByCollection } from '$lib/services/contents/collection/entries';
  import { getCollectionFileEntry } from '$lib/services/contents/collection/files';
  import { getCanonicalLocale, getListFormatter } from '$lib/services/contents/i18n';
  import { getOptions } from '$lib/services/contents/widgets/relation/helper';

  /**
   * @import { WidgetPreviewProps } from '$lib/types/private';
   * @import { RelationField } from '$lib/types/public';
   */

  /**
   * @typedef {object} Props
   * @property {RelationField} fieldConfig Field configuration.
   * @property {string | string[] | undefined} currentValue Field value.
   */

  /** @type {WidgetPreviewProps & Props} */
  let {
    /* eslint-disable prefer-const */
    locale,
    fieldConfig,
    currentValue,
    /* eslint-enable prefer-const */
  } = $props();

  const {
    // Widget-specific options
    collection: collectionName,
    file: fileName,
    multiple = false,
    value_field: valueField = '{{slug}}',
  } = $derived(fieldConfig);
  const listFormatter = $derived(getListFormatter(locale));
  const refEntries = $derived(
    fileName
      ? [getCollectionFileEntry(collectionName, fileName)].filter((entry) => !!entry)
      : getEntriesByCollection(collectionName),
  );
  const options = $derived(getOptions(locale, fieldConfig, refEntries));
  const refValues = $derived(
    (multiple ? /** @type {string[]} */ (currentValue) : /** @type {string[]} */ ([currentValue]))
      .filter((value) => value !== undefined)
      .map((value) => {
        const label = options.find((option) => option.value === value)?.label;

        if (label && label !== value) {
          if (['slug', '{{slug}}', '{{fields.slug}}'].includes(valueField)) {
            return label;
          }

          return `${label} (${value})`;
        }

        return value;
      }),
  );
</script>

{#if refValues.length}
  <p lang={getCanonicalLocale(locale)} dir="auto">{listFormatter.format(refValues)}</p>
{/if}
